<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <style>
        /*类似css可以防止加载时的出现的{{}}闪动现象,使用时在标签行间添加v-cloak,还需要在style中标记一下*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="wrap" v-cloak >{{msg}}</div>
</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
        var vm = new Vue({
            el: '#wrap',
            data: {
                msg: "123"
            },
            created: function () {
                alert("实例vue已经创建")
            },
            beforeCompile: function () {
                alert("编译之前")
            },
            compiled: function () {
                alert("编译之后")
            },
            ready:function () {
                alert("插入文档中")
            },

            beforeDestroy:function () {
                alert("销毁之前")
            },
            //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
            destroyed:function () {
                alert("销毁之后")
            }
        })

        document.onclick=function () {
            vm.$destroy();
        }
</script>